まずは、リンク文字とイメージ画像を表示する領域をTABLEで作成します。今回は、以下のように1行2列のTABLEを作成し、左側にリンク、右側にイメージ画像の領域を配置しました。なお、イメージ画像の領域には、IMGタグで真っ白な画像（white.gif）を表示しておけばOKです。ただし、「IMGタグに名前を付けておくこと」および「画像のサイズを指定しておくこと」を忘れてはいけません。画像のサイズは、次の手順で準備するイメージ画像と同じ大きさを指定します。 <TABLE border=0 width=420 cellpadding=0 cellspacing=0> <TR><TD width=100 valign=top> <A href="http://www.infoseek.co.jp">infoseek</A> <BR><BR> <A href="http://isweb.www.infoseek.co.jp/">isweb</A> <BR><BR> <A href="http://www.rakuten.co.jp/">楽天</A> </TD><TD width=320> <IMG src="white.gif" name="hp" border=1 width=300 height=200> </TD></TR> </TABLE>

	続いて、リンク先のイメージ画像を準備します。これは、画面キャプチャソフトなどを利用して作業を進めればよいでしょう。画面キャプチャソフトがない人は、[Print Screen]キーを押すと、画面全体をクリップボードにコピーできます（Windowsの場合）。あとは、画像編集ソフトでホームページ部分だけを切り抜き、JPEG画像として保存すればOKです。ただし、そのままでは画像のサイズが大きすぎるので、画像を縮小しておく必要があります。また、全てのリンク先について、イメージ画像のサイズを統一しておくことも大切です。ちなみに、今回の例では全てのイメージ画像を300×200ピクセルに縮小しました。 infoseek.jpg isweb.jpg   rakuten.jpg

	次に、イメージ画像の表示／非表示を切り替えるJavaScriptを各Aタグに追加します。リンク上にマウスポインタが来たときはイメージ画像を表示させるので、onMouseOverイベントにはJavaScript関数「view()」を指定します。また、この関数の引数には、表示するイメージ画像のファイル名を指定しておきます。一方、マウスポインタがリンク上から外れたときは、JavaScript関数「shiro()」でイメージ画像を非表示に戻します。 <A href="http://www.infoseek.co.jp" onMouseOver="view('infoseek.jpg')" onMouseOut="shiro()"> infoseek</A>

	最後に、「view()」と「shiro()」の2つのJavaScript関数を自作すれば、このテクニックが完成します。関数「view()」では、各リンク先のイメージ画像を表示させます。イメージ画像のファイル名は引数として関数に渡されるため、「（IMGタグの名前）.src=引数」という命令を実行すれば、「white.gif」をイメージ画像に更新できます。逆に、関数「shiro()」では、イメージ画像を「white.gif」に更新することで、表示されていたイメージ画像を非表示に戻しています。 <SCRIPT language="JavaScript"> <!-- function view(gazou){ hp.src=gazou } function shiro(){ hp.src="white.gif" } // --> </SCRIPT>

�y�V���o�C��[UNLIMIT��������1�~] EC�i�r���|�C���� Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� �����������O�~�y�������������z �C�O���s�����������I �C�O�z�e��